<template>
  <section>
    <van-sticky>
      <PageHeader title="会员管理" />
    </van-sticky>

    <van-tabs v-model="type" sticky @click="onTabChange">
      <van-tab title="会员管理" name="member">
        <form action="/">
          <div class="flex flex-row flex-center bg-color-white pd10">
            <div class="flex flex-row flex-center font-big">
              <span>推荐位：{{recommend_type_label}}</span>
              <i class="iconfont icon-65qiehuan ml10 mr10" style="font-size: 30px;" @click="showRecommendTypeActionSheet('search')" />
            </div>
            <div class="flex flex-row flex-1">
              <van-search
                v-model="keywords"
                placeholder="请输入搜索关键词"
                @search="onSearch"
                show-action
                class="w100">
                <template #action>
                  <div @click="onSearch">搜索</div>
                </template>
              </van-search>
            </div>
          </div>
        </form>

        <div class="pd10">
          <van-button type="primary" round block @click="$router.push({name: 'MemberAddForm'})">+添加</van-button>
        </div>

        <van-list
          class="mt10"
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="requestData">
          <div class="flex flex-col bg-color-white pd10 mb10 font-common record-item" v-for="(item, index) in dataList" :key="index">
            <div class="flex flex-row flex-center border-bottom-gray pt5 pb5">
              <div class="flex flex-row flex-left flex-centerV flex-1">
                <img :src="item.avatar_url ? item.avatar_url : BASE_STATIC_URL + 'images/mp/avatar.jpeg'" class="avatar" />
                <span class="ml10">{{item.nick}}</span>
              </div>
              <div class="flex flex-row flex-right flex-centerV">
                <span>手机号：<a :href="'tel:'+item.mobile">{{item.mobile}}</a></span>
              </div>
            </div>

            <div class="flex flex-row flex-centerV flex-left border-bottom-gray pt5 pb5">
              余额：{{item.balance}}元，可提现：{{item.withdraw_balance}}元，提现中：{{item.withdrawing_balance}}元，金币：{{item.gold_coin}}
            </div>

            <div class="flex flex-row flex-left border-bottom-gray pt5 pb5">
              注册：<span v-if="item.register_time>0">{{item.register_time|timeFormat('yyyy-MM-dd hh:mm:ss')}}</span><span v-else>N/A</span>
            </div>

            <div class="flex flex-row flex-left pt5 pb5">
              最后登录：<span v-if="item.last_login_time>0">{{item.last_login_time|timeFormat('yyyy-MM-dd hh:mm:ss')}}({{item.last_ip}})</span><span v-else>N/A</span>
            </div>

            <div class="flex flex-row flex-center font-common border-top-gray pt10 pb10">
              <div class="flex flex-row flex-center flex-1">
                <a :href="item.member ? (BASE_MP_URL + 'member_profile?id=' + item.member.id) : 'javascript:;'" target="_blank" class="dark">
                  <i class="iconfont icon-gerenzhuye mr5" />主页
                </a>
              </div>

              <div class="flex flex-row flex-center flex-1" @click="$router.push({name: 'MemberImages', params: {user_id: item.id}})">
                <i class="iconfont icon-xiangce mr5" />相册
              </div>

              <div class="flex flex-row flex-center flex-1" @click="onRecommendTap(index)">
                <i class="iconfont icon-tuijian mr5" /><span v-if="item.member && item.member.recommend_type > 0">取消</span><span v-else>推荐</span>
              </div>
            </div>

            <div class="flex flex-row flex-center font-common pt10 pb10">
              <div class="flex flex-row flex-center flex-1" @click="lock(index)">
                <i class="iconfont icon-suoding mr5" /><span v-if="item.is_locked==1">解锁</span><span v-else>锁定</span>
              </div>

              <div class="flex flex-row flex-center flex-1" @click="$router.push({name: 'MemberEditForm', params: {profile_id: item.member.id}})">
                <i class="iconfont icon-bianji mr5" />编辑
              </div>

              <div class="flex flex-row flex-center flex-1" @click="showLiveRoomBgImage(index)">
                <i class="iconfont icon-ico mr5" />直播间背景
              </div>
            </div>

          </div>
        </van-list>
      </van-tab>

      <van-tab title="交友申请" name="friend_apply"></van-tab>
      <van-tab title="投诉管理" name="complaint"></van-tab>
    </van-tabs>

    <Tabbar active="member"/>

    <van-action-sheet
      title="推荐位"
      v-model="recommendTypeActionVisible"
      :actions="recommendTypeActions"
      @select="onRecommendTypeSelect"
      cancel-text="取消"
      close-on-click-action />

    <van-popup v-model="liveRoomBgPopupVisible" :style="{ width: '60%' }">
      <div class="text-center mt10">
        直播间背景
      </div>

      <div class="text-center mt10">
        <img :src="liveRoomBgImg" height="200" width="200" v-if="liveRoomBgImg" />
      </div>

      <div class="text-center mt5 mb20 font-big">
        长按二维码保存或发给好友
      </div>
    </van-popup>

  </section>
</template>

<script>
import {
  activitySignInQrCodeUri,
  BASE_MP_URL,
  BASE_STATIC_URL,
  memberListsUri, memberLiveRoomBgUri,
  memberLockUri, memberRecommendUri
} from "../../common/api";
  import {MEMBER_RECOMMEND_TYPE_HOME} from '../../common/constants';
  import PageHeader from "../componets/PageHeader";
  import Tabbar from '../componets/Tabbar';
import {Toast} from "vant";

  export default {
    components: {
      PageHeader,
      Tabbar
    },
    data() {
      return {
        BASE_STATIC_URL: BASE_STATIC_URL,
        BASE_MP_URL: BASE_MP_URL,
        currentPage: 1,
        lastPage: 0,
        total: 0,
        pageSize: 10,
        loading: false,
        finished: false,
        dataList: [],
        keywords: '',
        recommend_type: 0,
        recommend_type_label: '不限',
        recommendTypeActionVisible: false,
        recommendTypeActionSheetType: '',
        recommendTypeActions: [
          {name: '不限', value: 0},
          {name: '平台首页', value: MEMBER_RECOMMEND_TYPE_HOME},
        ],
        currentItemIndex: -1,

        type: 'member',

        liveRoomBgImg: null,
        liveRoomBgPopupVisible: false
      }
    },
    methods: {
      onTabChange(name) {
        if(name == 'friend_apply') {
          this.$router.replace({name: 'MemberFriendApplyLists'});
        } else if(name == 'complaint') {
          this.$router.replace({name: 'MemberComplaintLists'});
        }
      },
      showRecommendTypeActionSheet(type) {
        this.recommendTypeActionSheetType = type;
        this.recommendTypeActionVisible = true;
      },
      onRecommendTypeSelect(item) {
        if(this.recommendTypeActionSheetType == 'search') {
          this.recommend_type = item.value;
          this.recommend_type_label = item.name;
        } else if(this.recommendTypeActionSheetType == 'recommend') {
          this.saveRecommendType(item.value);
        }
      },
      onSearch() {
        this.currentPage = 1;
        this.lastPage = 0;
        this.total = 0;
        this.loading = false;
        this.finished = false;
        this.dataList = [];
        this.requestData();
      },
      requestData() {
        const that = this;
        this.loading = true;
        const url = memberListsUri + '?page_size=' + that.pageSize + '&page=' + that.currentPage
          + '&recommend_type='+this.recommend_type+'&keywords=' + encodeURIComponent(that.keywords);
        this.$http.get(url).then(response => {
          let {code, msg, data} = response.body
          if (code != 0) {
            that.toast(msg);
          } else {
            that.loading = false;
            if (that.currentPage >= data.last_page) {
              that.finished = true;
            }
            that.currentPage = that.currentPage + 1;
            for (let i = 0; i < data.data.length; i++) {
              that.dataList.push(data.data[i]);
            }
            that.total = data.total;
            that.lastPage = data.last_page;
          }
        }, response => {
          // error callback
        })
      },
      onRecommendTap(index) {
        this.currentItemIndex = index;
        this.showRecommendTypeActionSheet('recommend');
      },
      saveRecommendType(recommendType) {
        const index = this.currentItemIndex;
        const that = this;
        const url = memberRecommendUri + '?member_id=' + this.dataList[index].member.id + '&recommend_type=' + recommendType;
        that.$http.get(url).then(response => {
          let {code, msg, data} = response.body
          if (code != 0) {
            that.toast(msg);
          } else {
            let user = that.dataList[index];
            user.member.recommend_type = recommendType;
            that.$set(that.dataList, index, user);
          }
        }, response => {
          // error callback
        })
      },
      lock(index) {
        const that = this;
        const url = memberLockUri + '?user_id=' + this.dataList[index].id;
        that.$http.get(url).then(response => {
          let {code, msg, data} = response.body
          if (code != 0) {
            that.toast(msg);
          } else {
            let user = that.dataList[index];
            user.is_locked = user.is_locked == 1 ? 0 : 1;
            that.$set(that.dataList, index, user);
          }
        }, response => {
          // error callback
        })
      },
      showLiveRoomBgImage(index) {
        const that = this;
        that.$http.get(memberLiveRoomBgUri + '?member_id=' + that.dataList[index].member.id).then(response => {
          let {code, msg, data} = response.body
          if (code != 0) {
            Toast.fail(msg);
          } else {
            that.liveRoomBgImg = data.url;
            that.liveRoomBgPopupVisible = true;
          }
        }, response => {
          // error callback
        })
      },
    },
    mounted: function () {

    }
  }
</script>

<style scoped>
  .record-item .avatar {
    height: 50px;
    width: 50px;
    border-radius: 25px;
  }
</style>
